<!-- 单选按钮组 -->
<template>
  <div class="radio-selection">
    <span class="label">{{ label }}</span>
    <div class="radio-group">
      <span class="title">{{ title }}</span>
      <ul>
        <li @click.prevent="changeSelected(item.value)" v-for="item in options" :class="{ selected: item.value === selected }" :key="item.label + item.value" :title="item.label">
          <icon-font v-if="item.icon" :type="item.icon" />
          <span v-else>{{item.label}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RadioSelection',
    props: {
      label: {
        type: String,
        required: true
      },
      options: {
        type: Array,
        required: true
      },
      selected: {
        type: [Number, String],
        required: true
      }
    },
    computed: {
      title () {
        const { selected, options } = this
        const option = options.find(option => option.value === selected)
        return option ? option.label : ''
      }
    },
    methods: {
      changeSelected (value) {
        this.$emit('update:selected', value)
      }
    }
  }
</script>

<style lang="less" scoped>
  .radio-selection {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    .label {
      width: 56px;
    }
    .radio-group {
      width: 196px;
      display: inherit;
      justify-content: inherit;
      padding: 0 0 0 5px;
      ul {
        li {
          float: left;
          cursor: pointer;
          padding: 0 14px;
          border-radius: 0;
          font-size: 12px;
          font-weight: 500;
          height: 32px;
          line-height: 30px;
          font-family: inherit;
          border: 1px solid #dcdee0;

          &.selected {
            border-color: #155bd4;
          }
        }
      }
    }
  }
</style>
